<template>
  <view class="to-bill-box" v-if="dataArr && dataArr.length">
    <view>
      <view class="content3" @click="toPage">
        <view class="t2">自定义查询</view>
        <u-icon name="arrow-right"></u-icon>
      </view>
      <view class="today" v-if="today !== today1">
        <view class="td-title">{{ today }}</view>
        <view class="content">
          <view class="h-tip">每一笔收款都记录着你的付出和努力</view>
          <view class="h-tip">今天继续加油</view>
        </view>
      </view>
      <scroll-view
        class="scroll-box"
        :scroll-y="true"
        @scrolltolower="onReachBottom"
        lower-threshold="150"
      >
        <view :class="today === today1 ? 'text-area flag' : 'text-area'">
          <view v-for="(item, index) in dataArr" :key="index">
            <view class="bill-title">{{
              item.date && item.date.substring(0, 10)
            }}</view>
            <view class="item">
              <view slot="title" class="u-slot-title1 line flag">
                <view class="left">
                  <text>收笔款数</text>
                  <text class="line-2">{{ item.totalCount }}</text>
                </view>
                <view class="right">
                  <text>共计</text>
                  <text class="line-3">收款 {{ item.realTotalPrice }}</text>
                  <text class="line-3">入账 {{ item.totalPrice }}</text>
                  <!-- <u-icon name="arrow-right"></u-icon> -->
                </view>
              </view>

              <view
                v-for="(i, ind) in item.items"
                :key="ind"
                class="u-slot-title1 line"
                @click="
                  toPage(item.date && item.date.substring(0, 10), i.orderType)
                "
              >
                <view class="left">{{ i.orderTypeDesc || "--" }} </view>
                <view class="center">{{ i.totalCount || "0" }}笔 </view>
                <view class="right">
                  <text class="line-1">收款 {{ i.realTotalPrice }}</text>
                  <text class="line-1">入账 {{ i.totalPrice }}</text>
                  <u-icon name="arrow-right"></u-icon>
                </view>
              </view>

              <!-- <view slot="title" class="u-slot-title1 line"> -->
              <!-- <view class="left">{{ item.payType || "--" }} </view>
            <view class="right tips2">{{ item.price || "--" }} </view> -->
              <!-- </view> -->
              <!-- <view slot="title" class="u-slot-title1">
              <view class="left">交易时间 </view>
              <view>{{ item.date || "--" }} </view>
            </view> -->
            </view>
          </view>
        </view>
        <view>
          <u-loadmore
            :status="status"
            :loading-text="loadingText"
            :loadmore-text="loadmoreText"
            :nomore-text="nomoreText"
          />
        </view>
      </scroll-view>
    </view>
  </view>
  <view
    class="to-bill-box"
    v-else-if="dataArr && dataArr.length === 0 && showFlag"
  >
    <view class="no-data">暂无数据</view>
  </view>
</template>

<script>
import { getStoreData, lastDayFun, httpPost, httpGet } from "@/utils/http.js";

export default {
  data() {
    return {
      showFlag: false,
      showModal: false,
      dataArr: [],
      status: "loadmore",
      today: lastDayFun(),
      today1: "",
      loadingText: "努力加载中",
      loadmoreText: "",
      nomoreText: "",
      listInfo: {
        pageNo: 1,
        pageSize: 10,
        pages: 0,
        total: 0,
      },
      flag: 0,
      currentDay: "",
    };
  },
  onLoad() {
    this.getdataFun();
  },
  methods: {
    toPage(v, orderType) {
      let value = "";
      if (v && orderType) {
        value = `?time=${v}&orderType=${orderType}`;
      }
      uni.navigateTo({
        url: "/pages/storeReconciliation/bill-search" + value,
      });
    },
    onReachBottom() {
      if (this.status === "nomore") {
        this.status = "nomore";
        return;
      } else {
        this.status = "loading";
        this.getdataFun();
      }
    },
    getdataFun() {
      const _this = this;
      if (!this.currentDay) {
        this.dataArr = [];
      }
      this.nomoreText = "";
      httpPost("/api/sellerstore/defaultSubStoreBillNew", {
        nextDay: lastDayFun(this.currentDay || "") + " 23:59:59",
        // orderType: 1,
      })
        .then((res) => {
          const result = res.data;
          _this.currentDay = result.date || "";
          _this.today1 =
            (_this.dataArr[0] &&
              _this.dataArr[0].date &&
              _this.dataArr[0].date.substring(0, 10)) ||
            "";
          _this.dataArr.push(result);
          _this.flag++;
          if (result.items && result.items.length) {
            _this.status = "loading";
            _this.nomoreText = "";
            if (_this.flag < 5) {
              _this.getdataFun();
            }
          } else {
            _this.status = "nomore";
            _this.nomoreText = "没有更多了";
          }
          _this.showFlag = true;
        })
        .catch((e) => {
          _this.showFlag = true;
        });
    },
  },
};
</script>

<style lang="scss">
.to-bill-box {
  display: flex;
  color: #333;
  background: #f8f8f8;
  width: 100vw;
  font-size: 14px;
  min-height: 100vh;
  position: relative;
  .no-data {
    width: 100%;
    color: #666;
    text-align: center;
    margin: 48px;
  }
  .pop-content {
    padding: 0;
    min-width: 80vw;
    .pop-t1 {
      background: #f8f8f8;
      height: 30px;
      padding: 12px 16px;
      line-height: 30px;
      font-size: 12px;
    }
    .line3 {
      border-bottom: 1px solid #eee;
    }
    .content1 {
      background: #fff;
      .p-item {
        height: 44px;
        line-height: 44px;
        font-size: 14px;
        display: flex;
        padding: 0 16px;
        justify-content: space-between;
        font-size: #333;
        .v-item {
          margin-right: 6px;
        }
        .p-right {
          font-size: #666;
          display: flex;
        }
      }
    }
    .sub1 {
      border-top: 1px solid #eee;
      height: 40px;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      .line1 {
        width: 1px;
        background: #eee;
        height: 40px;
      }
      .c1 {
        color: #999;
      }
      .c2 {
        color: #00a8ff;
      }
      .c1,
      .c2 {
        height: 40px;
        width: calc(50% - 1px);
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .today {
    margin-top: 30px;
    .td-title {
      line-height: 36px;
      margin-left: 16px;
    }
  }
  .content {
    background: #fff;
    border-radius: 4px;
    padding: 32px 16px;
    box-sizing: border-box;
    font-size: 14px;
    justify-content: center;
    align-items: center;
    margin: 0 16px 0 16px;
    flex-direction: column;
    width: calc(100vw - 32px);
    .h-tip {
      line-height: 24px;
      text-align: center;
    }
  }
  .content3 {
    position: fixed;
    padding: 0 16px;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 9;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    background: #f8f8f8;
    border-bottom: 1px solid #f1f1f1;
  }
  .item {
    background: #fff;
    border-radius: 4px;
    margin-bottom: 8px;
    padding: 2px 8px;
    .line {
      &.flag {
        padding-bottom: 6px;
      }
      &:last-child {
        padding: 6px 0;
      }
      &:not(:last-child) {
        border-bottom: 1px solid #eee;
      }
    }
  }
  .text-area {
    width: calc(100vw - 32px);
    color: #333;
    font-size: 14px;
    margin: 0 16px 16px;
    &.flag {
      margin: 30px 16px 16px;
    }
    .bill-title {
      line-height: 36px;
    }
    .left {
      display: flex;
      flex-direction: column;
    }
    .right {
      display: flex;
      flex-direction: column;
      text-align: right;
      position: relative;
      .u-icon--right {
        right: -12px;
        position: absolute;
        bottom: 0;
        line-height: 40px;
        width: 24px;
        color: #666;
        font-size: 20px;
        height: 40px;
      }
    }
    .tips2 {
      color: #f00;
      text-align: right;
    }
    .title {
      line-height: 30px;
      color: #666;
      margin-left: 16px;
    }
  }
  .u-slot-title1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 40px;
    .line-2 {
      height: 40px;
      line-height: 40px;
      font-size: 24px;
    }
    .line-3 {
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      font-size: 15px;
      color: #333;
      font-weight: bold;
    }
    .line-1 {
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      margin-right: 16px;
    }
  }
  .u-slot-title2 {
    display: flex;
    flex-direction: column;
  }
  .total {
    width: 120px;
    height: 120px;
    display: flex;
    margin-top: 32px;
    font-size: 14px;
    color: #fff;
    justify-content: center;
    align-content: center;
    background: linear-gradient(-90deg, #f90, #f60);
    box-shadow: 6px 12px 32px 12px rgba(247, 213, 62, 0.897);
    border-radius: 50%;
    .num {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .value {
        font-size: 16px;
        line-height: 30px;
      }
    }
  }
}
</style>
